<template>
    <div>
        <Vheader></Vheader>
        <Vmenu></Vmenu>
        <router-view></router-view>
    </div>
</template>

<script>
    import Vheader from './components/header.vue';
    import Vmenu from './components/menu.vue';
    export default {
        components: { Vheader, Vmenu },
        name: "App",
        data() {
            return {

            };
        },
        created() {
            this.fraudTypeFun();
        },
        mounted(){
            this.fraudTypeFun();
        },
        updated(){
            this.fraudTypeFun();
        },
        watch: {
            '$route': function() {
                this.fraudTypeFun();
            }
        },
        methods:{
            fraudTypeFun(){
                let _vm = this;
                _vm.$api.get('/webClassify/getAll',{},function (res) {
                    if(res.code === 1){
                        //_vm.$store.commit('set_fraudType',res.data);
                        _vm.$store.dispatch('set_stateAction',{name:'fraudType',value:res.data});
                    }
                });
            },
            chart_pie(id,title,data){
                let myChart = this.$echarts.init(document.getElementById(id));
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    color:['#0b56a7','#10ac84','#ffa514','#00dcff','#2593f3'],
                    legend:{
                        left:0,
                        top:0,
                        padding:[5,0],
                        itemGap :5,
                        itemWidth:17,
                        itemHeight:5,
                    },
                    series: [
                        {
                            name: title,
                            type:'pie',
                            center: ['50%', '60%'],
                            radius: ['0', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    formatter:'{d}%',
                                    textStyle: {
                                        fontSize: '16'
                                    }
                                },
                                emphasis: {
                                    show: true,
                                    formatter:'{d}%',
                                    textStyle: {
                                        fontSize: '18',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            data: data,
                        }
                    ]
                };
                myChart.setOption(option);
            },
            chart_bar(id,color,title,nameData,valueData) {
                let myChart = this.$echarts.init(document.getElementById(id));
                let option = {
                    color: color,
                    grid: {
                        top:10,
                        right: 30,
                        bottom:0,
                        left: 0,
                        containLabel: true
                    },
                    xAxis : {
                        show:true,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#b6c1e4'
                            },
                        },
                        axisLabel:{
                            color:"#666666"
                        },
                        axisTick:{
                            show:false
                        },
                        splitLine:{
                            show:false
                        },
                    },
                    yAxis :{
                        type : 'category',
                        data : nameData.reverse(),
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#b6c1e4'
                            },
                        },
                        axisLabel:{
                            color:"#666666",
                            interval:0,
                        },
                        axisTick:{
                            show:false
                        }
                    },
                    series : [
                        {
                            name:title,
                            type:'bar',
                            barWidth: '55%',
                            barCategoryGap: '100%',
                            data:valueData.reverse(),
                            itemStyle:{
                                normal: {
                                    color: color
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    distance:10,
                                    color:color
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            },
            chart_bar_v(id,color,title,nameData,valueData) {
                let myChart = this.$echarts.init(document.getElementById(id));
                let option = {
                    color: color,
                    grid: {
                        top:30,
                        right: 10,
                        bottom:0,
                        left: 0,
                        containLabel: true
                    },
                    yAxis : {
                        show:true,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#b6c1e4'
                            },
                        },
                        axisLabel:{
                            color:"#666666"
                        },
                        axisTick:{
                            show:false
                        },
                        splitLine:{
                            show:false
                        },
                    },
                    xAxis :{
                        type : 'category',
                        data : nameData,
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#b6c1e4'
                            },
                        },
                        axisLabel:{
                            color:"#666666",
                            interval:0,
                        },
                        axisTick:{
                            show:false
                        }
                    },
                    series : [
                        {
                            name:title,
                            type:'bar',
                            barWidth: '55%',
                            barCategoryGap: '100%',
                            data:valueData,
                            itemStyle:{
                                normal: {
                                    color: color
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    distance:10,
                                    color:color
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            },
            chart_line(id,title,nameData,valueData) {
                let myChart = this.$echarts.init(document.getElementById(id));
                let option = {
                    color:'#0b56a7',
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: 10,
                        right: 30,
                        bottom: 0,
                        top: 15,
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel:{
                            color:"#666",
                            fontSize:14
                        },
                        axisLine: {
                            show:true,
                            lineStyle: {
                                color: '#b9c4e5',
                            }
                        },
                        data: nameData
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show:true,
                            lineStyle: {
                                color: '#b9c4e5',
                            }
                        },
                        axisLabel:{
                            color:"#666",
                            fontSize:14
                        },
                        axisTick:{
                            show: true,
                            lineStyle:{
                                color:'#4c69ff'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color:'#e5e5e5',
                                type:'dashed'
                            }
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                        },

                    ],
                    series: [{
                        name:title,
                        type: 'line',
                        smooth: true,
                        symbol:'none',
                        areaStyle: {
                            opacity:1
                        },
                        data:valueData
                    }]
                };
                myChart.setOption(option);
            }
        }
    }
</script>
<style lang="css">
    @import './static/css/common.css';
</style>